<!--
 * @Author: 秦福凯
 * @Date: 2024-07-24 08:47:15
 * @Description: 侧边栏
 * @FilePath: \研发云实验小学官网后台\sx-school-bg\sx-shcool-bg\src\components\common\Menu\sidebar.vue
-->
<template>
	<div class="u-sidebar">
		<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="sidebar.collapse" 
			v-loading="sidebar.menuLoading" @select.native="selectMenu">
			<!-- 如果有子集 -->
			<template v-for="item in sidebar.menuData">
				<template v-if="item.childrenList">
					<SubMenu :data="item"></SubMenu>
				</template>
				<!-- 如果没有子集 -->
				<template v-else>
					<el-menu-item :index="item.url" :key="item.id">
						<el-icon>
							<component :is="item.icon"></component>
						</el-icon>
						<template #title>{{ item.name }}</template>
					</el-menu-item>
				</template>
			</template>
		</el-menu>
	</div>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted } from 'vue';
	import { useRoute,useRouter, } from 'vue-router';
	import { useSidebarStore } from '@/store/sidebar.js';
	import SubMenu from './submenu.vue'


	onMounted(() => {
		getSubMenu()
	})

	const sidebar = useSidebarStore();
	const route = useRoute();
	const router = useRouter();
	
	const onRoutes = computed(() => {
		return route.path;
	});


	// //获取子系统菜单
	function getSubMenu() {
		const param = localStorage.getItem('subSystemId')
		// sidebar.setMenuData()
	}

	function selectMenu(e){
		let floatAtrr = []
		// 递归拉平数组
		const flattenArray = (data) =>{
			data.forEach(item =>{
			if(item.url){
				floatAtrr.push(item)
			}else{
				flattenArray(item.childrenList)
			}
		})
		}
		
		flattenArray(sidebar.menuData)

		
		let index = floatAtrr.findIndex(i => i.url == e)
		let icon = ''
		if(index !== -1){
			icon = sidebar.menuData[index].icon
		}
		// 获取所有路由表
		// const allRoutes = router.getRoutes();
		// let indexRouter = allRoutes.findIndex(item => item.path == e)
		// let RouteName = allRoutes[indexRouter].name
		router.push({
			path:e,
      query: {
				icon:icon
			}
		})
	}


</script>

<style scoped lang="scss">


</style>